<template>
  <section>
    <el-table :data="listTableData"
              style="width: 100%;min-height: 400px">
      <el-table-column label="书籍ID"
                       prop="id"
                       align="center"
                       width="100">
      </el-table-column>

      <el-table-column label="书籍封面"
                       align="center">
        <template slot-scope="scope">
          <span class="main-img">
            <img v-show="scope.row.mainImage"
                 :src="scope.row.mainImage"
                 alt="暂无">
          </span>
        </template>
      </el-table-column>
      <el-table-column label="书名"
                       prop="name"
                       align="center">
      </el-table-column>
      <el-table-column label="分类"
                       prop="catename"
                       align="center">
      </el-table-column>

      <el-table-column label="所属作家"
                       align="center">
        <template slot-scope="scope">
          <el-button type="text"
                     size="small"
                     class="abtn">{{scope.row.nickname}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="作家ID"
                       prop="adminId"
                       align="center">
      </el-table-column>
      <el-table-column label="上架时间"
                       prop="updateTime"
                       align="center">
      </el-table-column>
    </el-table>
  </section>
</template>
<script>
export default {
  props: ['listTableData'],
}
</script>
<style scoped lang="scss">
a {
  font-size: 12px;
  line-height: 30px;
  color: #3a8ee6;
  text-decoration: underline;
}
a:hover {
  color: #2cca9a;
}
.main-img {
  width: 90px;
  height: 50px;
  background: #cccccc;
  display: block;
  overflow: hidden;
  margin: 3px auto;
  box-shadow: 0 0 3px #000;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
